<template>
	<view class="content">
		<view class="bg">
			<view class="bg-img">
				<image src="/static/bgs.png" mode="aspectFill"></image>
			</view>
			<view class="components">
				<view class="">
					<view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
						<view class="left-icon">
							<view class="left-icon" @click="$goURl('back')">
								<image src="/static/back.png" mode=""></image>
							</view>
						</view>
						<view class="main-title" :style="{ height: systemInfo.sBarHeight + 'px' }">优惠券详情</view>
						<view class="right">&nbsp;</view>
					</view>
					<view class="content">
						<view class="item">
							<view class="i-t">
								<view class="line"></view>
								<view class="i-t-txt">基本信息</view>
							</view>
							<view class="desc">
								<view class="d-item">
									<view class="d-l">优惠券名称</view>
									<view class="d-r">{{ detail.yhjName }}</view>
								</view>
								<view class="d-item">
									<view class="d-l">优惠券面额</view>
									<view class="d-r">￥{{ detail.denomination }}</view>
								</view>
								<view class="d-item">
									<view class="d-l">优惠券截至</view>
									<view class="d-r">{{ detail.expiryTime }}</view>
								</view>
								<view class="d-item">
									<view class="d-l">优惠券细则</view>
									<view class="d-r">{{ detail.rule }}</view>
								</view>
							</view>
						</view>
						<view class="item" v-if="!my">
							<view class="i-t">
								<view class="line"></view>
								<view class="i-t-txt">核销二维码</view>
							</view>
							<view class="code">
								<image
									:src="detail.imgData"
									mode="aspectFill"
									@click.stop="preview()"
									v-if="detail.verified == 0 && detail.nowTimestamp < detail.targetTimestamp"
								></image>
								<view class="" v-if="detail.verified == 2" style="display: flex; align-items: center">
									<view class="">核销时间：</view>
									<view class="">{{ detail.verifiedTime }}</view>
								</view>
								<view class="" v-if="detail.nowTimestamp > detail.targetTimestamp" style="display: flex; align-items: center">
									<view class="">过期时间：</view>
									<view class="">{{ detail.expiryTime }}</view>
								</view>
							</view>
						</view>
						<view class="item" style="background-color: transparent" v-else>
							<view class="get" @click="getCoupon" v-if="detail.collect == 0">领取优惠券</view>
							<view class="get1" v-if="detail.collect == 2">已领取</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getCouponDetail, getMyCouponDetail, collectCoupon } from '@/api/apiList.js';
import { debounce } from '@/utils/util.js';

// 获取优惠券详情
const detail = ref({});

const getCouponDetailData = async (yhjId) => {
	const res = await getCouponDetail({ yhjId });
	if (res.code == 200) {
		detail.value = res.data;
	}
};

// 获取我的优惠券详情
const getMyCouponDetailData = async (yhjId) => {
	const res = await getMyCouponDetail({ yhjId });
	if (res.code == 200) {
		detail.value = res.data;
		let now = new Date();
		let targetDate = new Date(detail.value.expiryTime);
		let nowTimestamp = now.getTime();
		let targetTimestamp = targetDate.getTime();
		detail.value.nowTimestamp = nowTimestamp;
		detail.value.targetTimestamp = targetTimestamp;
	}
};

let my = ref(false);
let id = ref();
onLoad((option) => {
	id.value = option.id;
	if (option.type == 1) {
		my.value = true;
		getCouponDetailData(option.id);
	} else {
		my.value = false;
		getMyCouponDetailData(option.id);
	}
});

// 领取优惠券
const getCoupon = debounce(
	async () => {
		uni.showLoading({
			title: '正在领取',
			icon: 'none'
		});
		const res = await collectCoupon({ yhjId: id.value });
		if (res.code == 200) {
			detail.value.collect = 2;
			uni.showToast({
				title: '领取成功',
				icon: 'none'
			});
			uni.hideLoading();
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			});
			uni.hideLoading();
		}
	},
	1000,
	true
);

// 图片预览
const preview = () => {
	uni.previewImage({
		urls: [detail.value.imgData],
		current: 1
	});
};

const current = ref(0);
const capsule = uni.getStorageSync('capsule');
let systemInfo = uni.getStorageSync('systemInfo');
</script>

<style lang="scss" scoped>
.bg {
	position: relative;
	.bg-img {
		image {
			height: 479rpx;
			width: 100%;
		}
	}
	.components {
		position: absolute;
		// top: var(--status-bar-height);
		padding-bottom: 166rpx;
		top: 0;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750rpx;
			.left-icon {
				image {
					padding-left: 25rpx;
					width: 30rpx;
					height: 33rpx;
				}
			}
			.main-title {
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 24rpx;
			}
		}

		.content {
			padding: 30rpx;
			.get {
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(0deg, #f49a5e 0%, #fe4f56 100%);
				padding: 20rpx 0;
				width: 100%;
				color: #fff;
				border-radius: 16rpx;
			}
			.get1 {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: gray;
				padding: 20rpx 0;
				width: 100%;
				color: #fff;
				border-radius: 16rpx;
			}
			.item:first-child {
				margin-bottom: 24rpx;
			}
			.item {
				background: #ffffff;
				border-radius: 16rpx;
				padding: 30rpx;
				.code {
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 360rpx;
						height: 360rpx;
						border-radius: 12rpx;
					}
				}
				.i-t {
					display: flex;
					align-items: center;
					margin-bottom: 61rpx;
					.line {
						width: 12rpx;
						height: 30rpx;
						background: linear-gradient(0deg, #fb4e47 0%, #ffffff 100%);
						border-radius: 6rpx;
						margin-right: 10rpx;
					}
					.i-t-txt {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #222222;
					}
				}
				.desc {
					.d-item:last-child {
						margin-bottom: 0;
						border: none;
					}
					.d-item {
						display: flex;
						align-items: center;
						padding-bottom: 30rpx;
						border-bottom: 1rpx solid #eee;
						margin-bottom: 30rpx;
						.d-l {
							margin-right: 36rpx;
						}
						.d-r {
						}
						.d-l,
						.d-r {
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #222222;
						}
					}
				}
			}
		}
	}
}
</style>
